<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        #container {
            width: 400px;
            margin: 0 auto;
        }

        .input, form + a {
            margin: 20px 20px;
            width: 250px;
        }

        .input > label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        .input:last-child {
            text-align: center;
        }

        input[type=text], input[type=password] {
            outline: none;
        }

        input[type=submit], input[type=reset] {
            width: 60px;
        }

        form + a {
            text-decoration: none;
            color: blue;
        }

        .hint {
            margin-left: 20px;
            color: red;
            font-size: 0.8em;
            height: 20px;
        }

        .mobile {
            width: 300px;
        }

        .photo {
            width: 350px;
        }

        .preview {
            margin: 10px 50px;
        }

        .intro {
            width: 720px;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>用户注册</h1>
    <hr>
    <form action="/register/" method="post">
        {{ msg }}
        {% csrf_token %}
        <div class="input">
            <label>用户名：</label>
            <input type="text" name="username" required minlength="4" maxlength="20">
        </div>
        <div class="input">
            <label>密码：</label>
            <input type="password" name="password">
        </div>
        <div class="input">
            <label>确认密码：</label>
            <input type="password" name="repassword">
        </div>
        <div class="input mobile">
            <label>手机号：</label>
            <input type="tel" name="tel">
            <input type="button" id="sendBtn" value="发送验证码">
        </div>
        <div class="input">
            <label>验证码：</label>
            <input type="text" name="mobilecode">
        </div>
        <div class="input">
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </div>
    </form>
    <a href="/login/">返回登录</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(() => {
        let countdown = 60

        function delaySend() {
            countdown -= 1
            if (countdown == 0) {
                $('#sendBtn').val('发送验证码').prop('disabled', false)
            } else {
                $('#sendBtn').val('发送验证码(' + countdown + 's)')
                setTimeout(delaySend, 1000)
            }
        }

        $('#sendBtn').on('click', (evt) => {
            let tel = $(evt.target).prev().val().trim()
            let pattern = /^1[3-9]\d{9}$/
            if (pattern.test(tel)) {
                $.getJSON('/mcode/' + tel + '/', (json) => {
                    $(evt.target).prop('disabled', true)
                    if (json.code === 20000) {
                        countdown = 60
                        setTimeout(delaySend, 1000)
                    } else {
                        alert(json.msg)
                    }
                })
            } else {
                alert('请输入有效的手机号码!')
            }
        })
    })
</script>

</body>
</html>